<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <div class="list-item">
      <ul>
        <router-link tag="li" class="item border-bottom" v-for="item of recommendList"
                     :key="item.id"
                     :to="'/detail/'+item.id">
          <div class="img-wrapper">
            <img class="img" :src="item.imgUrl" alt="">
          </div>
          <div class="content">
            <p class="item-title">{{ item.title }}</p>
            <p class="item-desc">{{ item.desc }}</p>
            <button class="item_btn">查看详情</button>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
  line-height .8rem
  background-color #eee
  text-indent .2rem
  margin-top .2rem
.item
  display: flex
  justify-content space-between
  align-items center
  margin-bottom .2rem
  .img-wrapper
    width 1.7rem
    height 1.7rem
    .img
      width 1.7rem
      height 1.7rem
  .content
    flex 1
    margin-left .2rem
    min-width 0
    .item-title
      line-height .54rem
      font-size .32rem
      ellipse()
    .item-desc
      line-height .4rem
      color #ccc
      ellipse()
    .item_btn
      background-color #ff9300
      margin-top .2rem
      padding 0 .1rem
      border-radius .06rem
      color #fff

</style>
